<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:10:18
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-24 12:27:35
-->
<template>
  <h4>动态绑定多个 attribute。</h4>
  <hr />
  <h4>v-bind 可以同时绑定多个 attribute。多个 attribute 写在一个对象中。</h4>
  <h4>对象中每个元素是一个键值对，键名为 attribute 名，键值为 attribute 值。</h4>
  <h4>通过不带参数（属性名称）的 v-bind，可以将它们绑定到单个元素上：</h4>
  <h4><span v-bind="objectOfAttrs"> &lt;span v-bind="objectOfAttrs" &gt;动态绑定多个 attribute&lt;/span&gt;</span></h4>
  <h4>以下是属性对象：</h4>
  <p>const objectOfAttrs = {</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;id: 'green', // 绑定到 id 属性</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;class: 'bold', // 绑定到 class 属性</p>
  <p>&nbsp;&nbsp;&nbsp;&nbsp;style: { background-color: 'yellow' } // 绑定到 style 属性</p>
  <p>};</p>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch, computed } from 'vue';

const objectOfAttrs = reactive({
  id: 'green',
  class: 'bold',
  style: {
    backgroundColor: 'yellow',
  }
});
</script>

<style scoped>
#blue {
  color: blue;
}

#red {
  color: red;
}

#green {
  color: green;
}

.bold {
  font-weight: bold;
}

/* Chrome, Safari, Edge, Opera */
#numInput[type="number"]::-webkit-outer-spin-button,
#numInput[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* firefox 兼容性 */
#numInput[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
</style>
